<template>
  <!--  卡业务- 异常信息- 异常卡 -->
  <div class="abnormal_card_table">
    <el-form :inline="true" :model="elform" class="demo-form-inline" size="mini">
      <el-form-item label="卡号:" label-width="40px">
        <el-input v-model="cardNumber" placeholder="卡号" size="mini" style="width: 120px"></el-input>
      </el-form-item>
      <el-form-item label="姓名:" label-width="40px">
        <el-input v-model="userName" placeholder="姓名" size="mini" style="width: 110px"></el-input>
      </el-form-item>
      <el-form-item label="开始日期:">
        <el-date-picker
          v-model="datetime[0]"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="开始日期"
          style="width: 130px"
          size="mini"
          :clearable="false"
        ></el-date-picker>
        <el-time-picker
          style="width:110px"
          v-model="time[0]"
          value-format="HH:mm:ss"
          placeholder="开始时间"
          :clearable="false"
          size="mini"
        ></el-time-picker>
      </el-form-item>
      <el-form-item label="结束日期:">
        <el-date-picker
          v-model="datetime[1]"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="结束日期"
          style="width: 130px"
          size="mini"
          :clearable="false"
        ></el-date-picker>
        <el-time-picker
          style="width:110px"
          v-model="time[1]"
          value-format="HH:mm:ss"
          placeholder="结束时间"
          :clearable="false"
          size="mini"
        ></el-time-picker>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="checked">是否已处理</el-checkbox>
      </el-form-item>
      <el-form-item label="可见范围:" v-if="userType == '1'">
        <el-select v-model="isShown" placeholder="设备类型" size="mini">
          <el-option
            v-for="item in isShownOpiton"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="异常卡类型:">
        <el-select v-model="exceptionType" placeholder="异常卡类型" size="mini" clearable>
          <el-option
            v-for="item in exceptionTypeOpiton"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="searchmarigin">
        <el-button
          type="primary"
          @click="onSubmit"
          size="mini"
          icon="el-icon-search"
          v-if="activeName == 'first' ? true : false"
        >查询</el-button>
        <el-button
          type="primary"
          @click="onSubmit2"
          size="mini"
          icon="el-icon-search"
          v-if="activeName == 'second' ? true : false"
        >查询</el-button>
      </el-form-item>
    </el-form>
    <div class="tabs_main">
      <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane label="异常卡统计" name="first">
          <el-table
            v-loading="loading"
            :data="detailslist"
            ref="table"
            border
            :header-cell-style="headFirst"
            :cell-style="(res) => headFirst_col(res, [])"
          >
            <el-table-column prop="userName" label="姓名" align="center"></el-table-column>
            <el-table-column prop="cardNumber" label="卡号" align="center"></el-table-column>
            <el-table-column prop="exceptionType" label="异常类型" align="center">
              <template slot-scope="scope">{{ scope.row.exceptionType | exceptionTypeFilter }}</template>
            </el-table-column>
            <el-table-column prop="exceptionCount" label="异常情况次数" align="center"></el-table-column>
            <el-table-column prop="totalAmount" label="异常金额(元)" align="center">
              <template slot-scope="scope">{{ scope.row.totalAmount | amountyuan }}</template>
            </el-table-column>
            <el-table-column
              label="操作"
              v-if="userType == '1' && searchInfo.isHandle != 1"
              width="70px"
            >
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="handleCard(scope.row)">处理该卡</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="page">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChangepage"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="recordCount"
            ></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="异常卡详情" name="second">
          <el-table
            v-loading="loading2"
            :data="detailslist2"
            ref="table"
            border
            :header-cell-style="headFirst"
            :cell-style="(res) => headFirst_col(res, [])"
          >
            <!-- <el-table-column type="selection" width="45" align="center"></el-table-column> -->
            <el-table-column prop="userName" label="姓名" align="center"></el-table-column>
            <el-table-column prop="cardNumber" label="卡号" align="center" min-width="100px"></el-table-column>
            <el-table-column prop="serialNumber" label="卡流水号" align="center"></el-table-column>
            <el-table-column prop="amount" label="操作金额" align="center">
              <template slot-scope="scope">{{ scope.row.amount | amountyuan }}</template>
            </el-table-column>
            <el-table-column prop="exceptionType" label="异常类型" align="center">
              <template slot-scope="scope">{{ scope.row.exceptionType | exceptionTypeFilter }}</template>
            </el-table-column>
            <el-table-column
              prop="exceptionMakeTime"
              label="异常产生时间"
              align="center"
              min-width="140px"
            ></el-table-column>
            <el-table-column prop="terminalCode" label="设备编号" align="center"></el-table-column>
            <el-table-column prop="terminalType" label="设备类型" align="center">
              <template slot-scope="scope">{{ scope.row.terminalType | terminalTypeOption }}</template>
            </el-table-column>
            <el-table-column label="操作" v-if="userType == '1'">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  @click="showInfo(scope.row)"
                  :class="{'orange':scope.row.isShow == 1}"
                >{{scope.row.isShow == 0 ?'显示数据':'隐藏数据'}}</el-button>
                <el-button
                  v-if="scope.row.isHandle == '0'"
                  size="mini"
                  type="text"
                  @click="handleDelete(scope.row)"
                  style="color:red"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="page">
            <el-pagination
              @size-change="handleSizeChange2"
              @current-change="handleCurrentChangepage2"
              :current-page="currentPage2"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize2"
              layout="total, sizes, prev, pager, next, jumper"
              :total="recordCount2"
            ></el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog
      title="异常卡分析处理参数配置"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="false"
    >
      <el-tree
        :data="data"
        show-checkbox
        ref="tree"
        node-key="id"
        @check-change="handleCheckChange"
        class="parameter_tree"
        @check="checkparameter"
        :props="defaultProps"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span :style="{ height: '40px' }">{{ node.label }}</span>
          <span :style="{ paddingLeft: '20px' }">
            <el-time-picker
              arrow-control
              v-model="value2"
              v-if="node.id == 2 ? true : false"
              size="mini"
              :disabled="flagtime"
              :picker-options="{
                selectableRange: '00:00:00 - 23:59:59',
              }"
              placeholder="任意时间点"
            ></el-time-picker>
          </span>
        </span>
      </el-tree>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      elform: {},
      activeName: 'first',
      dialogVisible: false,
      cardNumber: '',
      userName: '',
      checked: false,
      datetime: [],
      time: [],
      //  客户是否可见异常卡信息
      isShown: -1,
      isShownOpiton: [
        { value: -1, label: '所有' },
        { value: 0, label: '用户不可见' },
        { value: 1, label: '用户可见' }
      ],
      /**异常卡类型 */
      exceptionType: '',
      exceptionTypeOpiton: [
        { value: 1, label: '复制卡' },
        { value: 2, label: '挂失卡' },
        { value: 3, label: '外来卡' },
        { value: 4, label: '未成功扣款' }
      ],
      flagtime: true,
      data: [
        {
          id: 1,
          label: '定时分析异常卡数据',
          checkflag: true,
          children: [
            {
              id: 2,
              label: '指定时间每天',
              checkflag: true
            },
            {
              id: 3,
              label: '分析时自动处理异常卡',
              children: [
                {
                  id: 4,
                  label: '挂失异常卡'
                },
                {
                  id: 5,
                  label: '汇总异常数据金额,生成扣费数据'
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      value2: '',
      timedisabled: true,
      loading: false,
      detailslist: [],
      pageNum: 1,
      pageSize: 20,
      searchInfo: {},
      currentPage: 0,
      recordCount: 0,

      loading2: false,
      detailslist2: [],
      pageNum2: 1,
      pageSize2: 20,
      searchInfo2: {},
      currentPage2: 0,
      recordCount2: 0
    }
  },
  created() {
    this.userType = sessionStorage.getItem('userType')
    this.operatorGuid = sessionStorage.getItem('administrator')
    // 初始化时间
    this.datetime = [this.getNowTime('yy-mm-dd'), this.getNowTime('yy-mm-dd')]
    // this.datetime = ['2020-01-01', '2021-01-25']
    this.time = ['00:00:00', '23:59:59']
  },
  mounted() { 
    console.log(this.data[0])
  },
  computed: {
    changeschoolid: {
      get() {
        return this.$store.state.user.changeschoolid
      }
    }
  },
  filters: {
    exceptionTypeFilter(val) {
      let obj = { 1: '复制卡', 2: '挂失卡', 3: '外来卡', 4: '未成功扣款' }
      if (obj[val]) {
        return obj[val]
      } else {
        return '其他'
      }
    }
  },
  methods: {
    onSubmit() {
      this.pageNum = 1
      console.log(this.datetime)
      if (this.datetime !== null && this.datetime !== []) {
        this.searchInfo.startTime = this.datetime[0] + ' ' + this.time[0]
        this.searchInfo.endTime = this.datetime[1] + ' ' + this.time[1]
      }
      this.searchInfo.cardNumber = this.cardNumber
      this.searchInfo.userName = this.userName
      if (this.checked === false) {
        this.searchInfo.isHandle = 0
      } else {
        this.searchInfo.isHandle = 1
      }
      if (this.userType == '1') {
        this.searchInfo.isShown = this.isShown
      } else {
        this.searchInfo.isShown = 1
      }
      this.searchInfo.exceptionType= this.exceptionType
      this.searchInfo.unitGuid = this.changeschoolid
      this.cardexceptioninit()
    },
    onSubmit2() {
      this.pageNum2 = 1
      this.searchInfo2.startTime = this.datetime[0] + ' ' + this.time[0]
      this.searchInfo2.endTime = this.datetime[1] + ' ' + this.time[1]
      this.searchInfo2.cardNumber = this.cardNumber
      this.searchInfo2.userName = this.userName
      if (this.checked === false) {
        this.searchInfo2.isHandle = 0
      } else {
        this.searchInfo2.isHandle = 1
      }

      if (this.userType == '1') {
        this.searchInfo2.isShown = this.isShown
      } else {
        this.searchInfo2.isShown = 1
      }
      this.searchInfo2.exceptionType= this.exceptionType
      this.searchInfo2.unitGuid = this.changeschoolid
      this.cardexception()
    },
    //异常卡统计
    cardexceptioninit() {
      this.loading = true
      this.searchInfo.unitGuid = this.changeschoolid
      this.$http({
        url: this.$http.adornUrl('/card/card-exception-statistic-page'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            searchInfo: this.searchInfo
          },
          messageType: 0
        })
      }).then(({ data }) => {
        console.log(data)
        this.loading = false
        if (data.messageCode == 200) {
          this.detailslist = data.messageContent.data
          this.recordCount = data.messageContent.recordCount
          this.currentPage = data.messageContent.pageNum
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },

    /**
     * 处理异常卡
     */
    handleCard(row) {
      this.$confirm('此操作将处理此卡异常, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl('/card/card-exception-handle'),
            method: 'post',
            data: this.$http.adornData({
              messageContent: {
                cardNumber: row.cardNumber,
                exceptionType: row.exceptionType,
                operatorGuid: this.operatorGuid,
                unitGuid: this.changeschoolid,
                userGuid: row.userGuid,
                walletNo: row.walletNo,
                isShow: row.isShow
              },
              messageType: 0
            })
          }).then(({ data }) => {
            if (data.messageCode == 200) {
              this.$message({
                type: 'success',
                message: '处理成功'
              })
              this.cardexceptioninit()
            } else {
              this.$message.error(data.errorMessage)
            }
          })
        })
        .catch(() => {})
    },
    //异常卡详情
    // /card/card-exception-page
    cardexception() {
      this.loading2 = true
      this.$http({
        url: this.$http.adornUrl('/card/card-exception-page'),
        method: 'post',
        data: this.$http.adornData({
          messageContent: {
            pageNum: this.pageNum2,
            pageSize: this.pageSize2,
            searchInfo: this.searchInfo2
          },
          messageType: 0
        })
      }).then(({ data }) => {
        this.loading2 = false
        if (data.messageCode == 200) {
          this.detailslist2 = data.messageContent.data
          this.recordCount2 = data.messageContent.recordCount
          this.currentPage2 = data.messageContent.pageNum
        } else {
          this.$message.error(data.errorMessage)
        }
      })
    },
    checkparameter(val) {
      console.log(val)
      console.log(this.data)
    },
    /**
     * 删除
     */
    handleDelete(row) {
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl('/card/card-exception-remove'),
            method: 'post',
            data: this.$http.adornData({
              messageContent: {
                deleteIdList: [row.exceptionGuid],
                unitGuid: row.unitGuid
              },
              messageType: 0
            })
          }).then(({ data }) => {
            if (data.messageCode == 200) {
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              this.cardexception()
            } else {
              this.$message.error(data.errorMessage)
            }
          })
        })
        .catch(() => {})
    },
    /**
     * 显示数据
     */
    showInfo(row) {
      this.$confirm(
        `此操作将${
          row.isShow == 0 ? '显示该数据给代理商/学校' : '隐藏此条数据'
        }, 是否继续?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          this.$http({
            url: this.$http.adornUrl('/card/card-exception-show'),
            method: 'post',
            data: this.$http.adornData({
              messageContent: {
                idList: [row.exceptionGuid],
                isShown: row.isShow == 0 ? 1 : 0,
                unitGuid: row.unitGuid
              },
              messageType: 0
            })
          }).then(({ data }) => {
            if (data.messageCode == 200) {
              this.$message({
                type: 'success',
                message: '显示成功'
              })
              this.cardexception()
            } else {
              this.$message.error(data.errorMessage)
            }
          })
        })
        .catch(() => {})
    },
    //递归
    recursive(data, val) {},
    handleCheckChange(val) {
      console.log(val)
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.cardexceptioninit()
    },
    handleCurrentChangepage(val) {
      this.pageNum = val
      this.cardexceptioninit()
    },
    handleSizeChange2(val) {
      this.pageSize2 = val
      this.cardexception()
    },
    handleCurrentChangepage2(val) {
      this.pageNum2 = val
      this.cardexception()
    }
  }
}
</script>

<style lang="scss" scoped>
.abnormal_card_table {
  .orange {
    color: orange;
  }
  padding: 10px;
  /deep/.el-form-item.el-form-item--mini {
    margin-bottom: 0;
  }
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  //滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 3px;
  }
  .demo-form-inline,
  .demo-form-inline1 {
    /deep/.el-form-item__label {
      padding-right: 5px;
    }
    .el-form-item {
      margin-bottom: 5px;
    }
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 340px;
    }
  }
  .demo-form-inline1 {
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
  }
  .page {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>